<template>
  <div class="page">
    <!-- 侧边导航栏 -->
    <nav class="sidebar">
      <ul>
        <li @click="navigateTo('/welcome')">基地详情</li>
          <li @click="navigateTo('/BaseAdd')">基地添加</li>
          <li @click="navigateTo('/BaseDelete')">基地删除</li>
          <li @click="navigateTo('/BaseEdit')">基地修改</li>
          <li @click="navigateTo('/ClassOpen')">开课管理</li>
        <!-- 添加其他导航选项 -->
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <div class="content">
      <button class="test_goBack" @click="goBack">返回登录</button>
      <h1>欢迎登录开课管理系统</h1>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <p>
        <span class="head1">区域-中文：</span>
        <span class="head2">培训基地-中文：</span>
        
      </p>
     
      <input class="select1"  style="background-color: rgb(194, 187, 187);">
      
        <input class="select2" style="background-color: rgb(194, 187, 187);">
      
      
      <p>
        <span class="head1">基地代码：</span>
        <span class="head2">基地管理员：</span>
      </p>
      <p >
        <input class="select1" style="background-color: rgb(194, 187, 187);">
        
        <input class="select2" style="background-color: rgb(194, 187, 187);">
       
      </p>


   
      <p>
        <span class="head1">培训地点-中文：</span>
        <span class="head2">基地描述-中文：</span>
      </p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
      
        <input class="select2" style="background-color: rgb(194, 187, 187);">
     
      </p>   
      
      <p>
        <span class="head1">课程名-中文：</span>
        <span class="head2">课程属性：</span>
      </p>
      <p class="test">
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
      
        <input  class="select2" style="background-color: rgb(194, 187, 187);">
      </p>  
      <p>
        <span class="head0">生效标识：</span>
      </p>

      <p class="test0">
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
      </p>  
      <p>
        <span class="head1">课程描述-中文：</span>
      </p>

      <p class="test">
        <textarea  class="select1" style="background-color: rgb(194, 187, 187);">
        </textarea>
      </p>  
      <p>
        <span class="head1">期数</span>
        <span class="head2">导师</span>
      </p>
      <p class="test">
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
      
        <input  class="select2" style="background-color: rgb(194, 187, 187);">
      </p>  
      <p>
        <span class="head1">开始时间</span>
        <span class="head2">结束时间</span>
      </p>
      <p class="test">
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
      
        <input  class="select2" style="background-color: rgb(194, 187, 187);">
      </p>  
    
      <button class="btn">添加</button>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

    
export default {
  setup() {
    const router = useRouter();

    // 导航到指定路由
    function navigateTo(route) {
      router.push(route);
    }

    // 返回登录页面
    function goBack() {
      router.push('/');
    }

    return {
      navigateTo,
      goBack,
    };
  },
};
</script>

<style scoped>
/* 样式调整，使导航栏在左侧并占据整个左侧高度 */
.page {
  display: flex;
}

.select1{
  width:20% ;
  margin-left: -28%;
  
}

.btn{
  margin-left: -28%;
}

.select2{
  width:20% ;
  margin-left: 10%;
}
.head1 {
  margin-left: -28%;
}

.head2 {
  margin-left: 20%;
}
.sidebar {
  width: 10%;
  /* 可根据需求调整宽度 */
  background-color: #333;
  color: white;
  height: auto;
  /* 100%视窗高度，占据整个左侧高度 */
  overflow-y: auto;
  /* 如果内容超出高度，添加滚动条 */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
}

.head0{
  margin-left: -25%;
}



.content {
  flex: 1;
  /* 填充剩余空间 */
  padding: 20px;
  color: rgb(0, 0, 0);
  background-color: rgb(245, 245, 245);

}


.test_goBack {
  margin-right: -90%;
}


/* 样式调整，使导航选项看起来更明显 */
.sidebar ul li:hover {
  background-color: #555;
}
</style>